<template>
  <div>
    <!-- <input type="text" v-model.lazy="count" @input="input" @change="change"/>
    <button @click="submit">点击提交</button> -->
    <!-- <input type="checkbox" @click="show = !show"/> -->
    <input type="checkbox" v-model="checked"/>
    <!-- <h1>{{!show ? '选中':'没有选中'}}</h1> -->
    <h1>{{checked ? '选中':'没有选中'}}</h1>
    <!-- <h1 v-show="!show">选中</h1>
    <h1 v-show="show">没有选中</h1> -->
    <input type="radio" v-model="checked" value="1" />男
    <input type="radio" v-model="checked" value="2" />女
    <button @click="handleSubmit">点击提交</button>
    <!-- <input type="radio" v-model="checked" value="0" />其它
    <input type="radio" v-model="checked" value="1" />身份证
    <input type="radio" v-model="checked" value="2" />护照
    <input type="radio" v-model="checked" value="3" />学生证
    <input type="radio" v-model="checked" value="4" />驾驶证
    <button @click="handleSubmit">点击提交</button> -->
  </div>
</template>

<script>
//1、v-model的作用?
//实现双向的数据绑定的
//第一个方向:数据可以影响视图的展示
//第二个方向:视图也可以影响数据
//修饰符 .number .lazy .trim

//判断输入框是否输入内容

//第一个修饰符.number可以把输入框的内容转换为数字
//.lazy修饰符的作用 =》改变数据更新的时机，默认情况下input事件触发的时候，实时更新
//添加了lazy,change的时候更新数据
export default {
  data() {
    return {
      count: '',
      show: true,
      checked: 0,
    }
  },
  methods: {
    submit() {
      console.log(this.count)
    },
    input() {
      console.log('input事件触发')
    },
    change() {
      console.log('change事件触发')
    },
    handleSubmit() {
      console.log(this.checked);
    },
  },
}
</script>

<style></style>
